<template>
    <div class="fancy-section">
        <div class="fancy-section__title">{{title}}</div>
        <div class="fancy-section__body">
            <div class="fancy-section__item" 
                v-for="item in list" 
                :key="item.id" 
                @click="onClick(item)"
                >
                <span>{{ item.text }}</span>
                <van-icon name="cross" v-show="closeable" @click.stop="onClose(item)"/>
            </div>           
        </div>
    </div>
</template>

<script lang="ts" setup>

export interface FancySectionItem {
    id:string | number
    text:string
}

export interface FancySectionProps {  //定义类型
    title?: string
    list?: FancySectionItem[]
    closeable?: boolean 
}

const props = withDefaults(defineProps<FancySectionProps>(),{
    title:'离你最近',
    closeable: false
})
const emit = defineEmits(['click','update:list'])

function onClick(item:FancySectionItem){
    //触发自定义的click事件
    emit('click',item)
}

function onClose(item:FancySectionItem){
    //删除当前这项，得到一份新的 list?
    const newList = props.list?.filter(aaaa => aaaa.id !== item.id)
    console.log(newList,'=== newList');
    emit('update:list',newList)
    
}

</script>

<style lang="scss" scoped>
.fancy-section__title{
    padding-left: 10px;
    font-size: 14px;
    color: #000;
}
.fancy-section__body{
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
    padding-top: 10px;
}
.fancy-section__item{
    height: 30px;
    background-color: hsla(0,0%,95.7%,.6);
    line-height: 14px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 13px;
    padding: 8px 12px;
    margin-right: 10px;
    margin-bottom: 10px;
    align-items: center;
}
.van-icon {
    margin-left: 5px;
    cursor: pointer;
    &:hover{
        background-color: #ccc;
    }
}

</style>